<template>
	<view class="page">
		<view class="page-header">
			<view class="cell flex_between_center" @tap="$goToPage('/pagesMall/waterOrder/historyOrderList')">
				<text class="cell-title">订单管理</text>
				<u-icon label="历史订单" size="20rpx" labelSize="20rpx" labelPos="left" name="arrow-right"></u-icon>
			</view>
			<u-tabs :current="tabIndex" :list="tabList" :scrollable="false" lineWidth="120rpx" lineHeight="6rpx"
				lineColor="#276AEE" :itemStyle="{height:'100rpx'}" :activeStyle="{color:'#276AEE',fontSize:'24rpx'}"
				:inactiveStyle="{color:'#000000',fontSize:'24rpx'}" @change="tabChange"></u-tabs>
		</view>

		<GoodsList ref="goodsList" :list="items" :checkable="[1,2].includes(tabList[tabIndex].value)"
			:buttonText="this.tabIndex|filter_btnText" @itemClick="itemClick" @batchClick="batchClick">
		</GoodsList>

		<u-loadmore height="100" fontSize="28rpx" iconSize="34rpx" :status="loadMoreStatus" @loadmore="scrolltolower" />
	</view>
</template>

<script>
	import GoodsList from './components/GoodsList.vue'

	export default {
		components: { GoodsList },
		data() {
			return {
				openId: '',
				shopOpenId: '',
				items: [],
				pageNo: 1,
				pageSize: 10,
				loadMoreStatus: 'nomore', //loading / nomore / loadmore
				tabList: [{
					name: '顾客已下单',
					value: 1
				}, {
					name: '订单进行中',
					value: 2
				}, {
					name: '订单已完成',
					value: 3
				}],
				tabIndex: 0
			}
		},
		filters: {
			filter_btnText(val) {
				switch (val) {
					case 0:
						return '派送'
						break
					case 1:
						return '完成'
						break
					default:
						return ''
						break
				}
			}
		},
		async onShow() {
			let { openid } = uni.getStorageSync('openId')
			this.openId = openid

			this.loadMoreStatus = 'loading'
			await this.getWaterGoodsInfo()

			if (this.shopOpenId) {
				this.getDBData()
			}
		},
		onPullDownRefresh() {
			this.refresherrefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.scrolltolower()
		},
		methods: {
			tabChange({ index }) {
				this.items = []
				this.tabIndex = index
				this.refresherrefresh()
			},
			// 单个项点击
			itemClick(item) {
				switch (this.tabList[this.tabIndex].value) {
					case 1:
						this.handleSend(item)
						break;
					case 2:
						this.handleSendFinish(item)
						break;
					default:
						uni.showToast({
							icon: 'none',
							title: '未知情况，请联系管理员！'
						})
						break;
				}
			},
			// 批量操作
			batchClick(ids) {
				switch (this.tabList[this.tabIndex].value) {
					case 1:
						this.handleSendBatch(ids)
						break;
					case 2:
						this.handleSendFinishBatch(ids)
						break;
					default:
						uni.showToast({
							icon: 'none',
							title: '未知情况，请联系管理员！'
						})
						break;
				}
			},
			// 派送
			async handleSend(item) {
				let params = {
					id: item.id,
					openId: this.openId
				}
				await this.$api.addDelivery(params).then(res => {
					if (res.success) {
						uni.showToast({
							icon: 'none',
							title: res.result
						})
						this.refresherrefresh()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				}).catch(() => {
					uni.showToast({
						icon: 'none',
						title: '系统异常，请联系管理员！'
					})
				})
			},
			// 订单完成
			async handleSendFinish(item) {
				let params = {
					id: item.id,
					openId: this.openId
				}
				await this.$api.addDeliveryFinish(params).then(res => {
					if (res.success) {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
						this.refresherrefresh()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.result
						})
					}
				}).catch(() => {
					uni.showToast({
						icon: 'none',
						title: '系统异常，请联系管理员！'
					})
				})
			},
			// 批量派送
			async handleSendBatch(ids) {
				let params = {
					ids: ids,
					openId: this.openId
				}
				await this.$api.addDeliveryBatch(params).then(res => {
					if (res.success) {
						uni.showToast({
							icon: 'none',
							title: res.result
						})
						this.refresherrefresh()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				}).catch(() => {
					uni.showToast({
						icon: 'none',
						title: '系统异常，请联系管理员！'
					})
				})
			},
			// 批量订单完成
			async handleSendFinishBatch(ids) {
				let params = {
					ids: ids,
					openId: this.openId
				}
				await this.$api.addDeliveryFinishBatch(params).then(res => {
					if (res.success) {
						uni.showToast({
							icon: 'none',
							title: res.result
						})
						this.refresherrefresh()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				}).catch(() => {
					uni.showToast({
						icon: 'none',
						title: '系统异常，请联系管理员！'
					})
				})
			},
			async getWaterGoodsInfo() {
				let params = {
					openId: this.openId
				}
				await this.$api.queryWaterGoodsInfo(params).then((res) => {
					if (res.success) {
						this.shopOpenId = res.result.shopOpenId
					} else {
						this.loadMoreStatus = 'nomore'
					}
				}).catch(() => {
					this.loadMoreStatus = 'nomore'
				})
			},
			async getDBData(type = 'refresh') {
				let params = {
					openId: this.shopOpenId,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					sellBuy: this.tabList[this.tabIndex].value
				}
				await this.$api.getMsSoldShopOrderList(params).then((res) => {
					if (res.success) {
						let tData = res.result.records
						if (type === 'refresh') {
							this.items = tData
						}
						if (type === 'add') {
							this.items.push(...tData)
						}
						// console.log('列表：', this.items);
						this.loadMoreStatus = res.result.pages > res.result.current ? 'loadmore' : 'nomore'
					} else {
						this.loadMoreStatus = 'nomore'
					}
				}).catch(() => {
					this.loadMoreStatus = 'nomore'
				})
			},
			scrolltolower() {
				if (this.loadMoreStatus === 'nomore') {
					return
				}
				this.loadMoreStatus = 'loading';
				this.pageNo += 1
				this.getDBData('add')
			},
			refresherrefresh() {
				this.items = []
				this.pageNo = 1
				this.loadMoreStatus = 'loading'
				this.$refs.goodsList.clearChecked()
				setTimeout(async () => {
					await this.getDBData('refresh')
				}, 500)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}
</style>

<style lang="scss" scoped>
	.page {
		padding-top: 20rpx;
		padding-bottom: calc(200rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
	}

	.page-header {
		position: sticky;
		top: 0;
		padding: 0 32rpx;
		background-color: #fff;
		z-index: 999;

		.cell {
			border-bottom: 1px solid #F1F1F1;

			.cell-title {
				color: #000000;
				font-size: 30rpx;
				line-height: 42px;
			}

			&:hover {
				opacity: 0.8;
			}
		}
	}
</style>